{% extends "layout.html" %}
{% block body %}
<link rel="stylesheet" type="text/css" href="../static/DataTables1.10.18/DataTables-1.10.18/css/dataTables.bootstrap.min.css"/>

<script type="text/javascript" src="../static/DataTables1.10.18/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/DataTables1.10.18/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="../static/DataTables1.10.18/Buttons-1.5.4/css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../static/DataTables1.10.18/Buttons-1.5.4/css/buttons.bootstrap.css">
<script src="../static/DataTables1.10.18/Buttons-1.5.4/js/dataTables.buttons.min.js"></script>
<script src="../static/DataTables1.10.18/Buttons-1.5.4/js/buttons.bootstrap.js"></script>
<script src="../static/DataTables1.10.18/JSZip-2.5.0/jszip.min.js"></script>
<script src="../static/DataTables1.10.18/Buttons-1.5.4/js/buttons.html5.min.js"></script>



<style>
.dataTable td {padding: 2px !important;}
table.dataTable thead tr:nth-child(1) td {padding-right: 30px !important;}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after
{ bottom: 2px;}
#tbl_wrapper .btn-group {margin-right: 10px}
</style>
{% if IsAdmin() %}
  <style>
    #tbl tbody td:nth-child(1){cursor: pointer;}
    #tbl tbody td:nth-child(2){cursor: pointer;color: #2b669a;}
  </style>
  <button type="button" class="btn btn-primary" onclick="CreateInstance()"><i class="fas fa-plus"></i> Add Ecotaxa instance</button><br>
Click on ID or Name to show and edit entry.
  {% endif %}
  <a href="?">Clear filter</a>
<table id="tbl" style="width:100%" class="table table-striped table-bordered" >
<thead>
  <tr><td>ID</td><td>Name</td><td>URL</td><td>Stat. Last update</td><td>Ecotaxa version</td></tr>
</thead>
<tbody>
{% for l in lst %}
  <tr><td>{{l.id}}</td><td>{{l.name}}</td><td>{{l.url}} - <a href="{{l.url}}" target="_blank"><i class="fas fa-external-link-alt"></i></a> </td><td>{{l.laststatupdate_datetime}}</td><td>{{ l.ecotaxa_version }}</td></tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function() {
    $('#tbl thead tr').clone(true).appendTo( '#tbl thead' );

    var table=$('#tbl').DataTable( {
        scrollY:        '70vh',
        scrollCollapse: true,
        paging:         false,
        orderCellsTop: true,
        fixedHeader: true,
        dom: '<"top">rt<"bottom"B i p><"clear">',
        buttons: ['copy', 'csv', 'excel'],
        orderMulti: false,
        columnDefs: [
           { width:'40px', targets: 0 }
        ]

    });

    $('.dataTables_scrollHead thead tr:eq(1) td').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" title="Search '+title+'" style="width:100%"/>' );
            $( 'input,select', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table.column(i).search( this.value ).draw();
                }
            } );
        } );
{% if IsAdmin() %}
    $('#tbl tbody').on('click','td:nth-child(1),td:nth-child(2)',function () {
      var id=$(this).closest('tr').find('td:nth-child(1)').text();
      At2PopupWaitOpenLoad(0,"/browseinstanceeditpopup/"+id,"Edit Ecotaxa instance "+id);
    });
  {% endif %}
} );

function CreateInstance() {
  At2PopupWaitOpenLoad(0,"/browseinstanceeditpopup/new","Create Ecotaxa instance ");
}


</script>
{% endblock %}